<template>
  <div class="container">
    <el-divider content-position="left"><span class="title-left-color">业务员拜访记录</span></el-divider>
    <div style="margin: 0 70px">
      <el-descriptions :column="2" size="default">
        <el-descriptions-item label="店铺名称：">{{ form.store_name }}</el-descriptions-item>
        <el-descriptions-item label="业务员：">{{ form.contacts_name }}</el-descriptions-item>
        <el-descriptions-item label="店铺地址：">{{ form.store_full_address }}</el-descriptions-item>
        <el-descriptions-item label="业务员打卡地址：">{{ form.address }}</el-descriptions-item>
        <el-descriptions-item label="拜访理由：">{{ form.reason }}</el-descriptions-item>
        <el-descriptions-item label="拜访时间：">{{ form.create_time }}</el-descriptions-item>
        <!-- <el-descriptions-item label="问卷调查">{{ form.title }}</el-descriptions-item> -->
        <el-descriptions-item label="拜访图片：">
          <el-image class="img-item" v-for="(item, index) in form.images" :key="index" :src="item" :preview-src-list="form.images"></el-image>
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <el-divider content-position="left"><span class="title-left-color">商务回访记录</span></el-divider>
    <div style="margin: 0 70px">
      <el-descriptions :column="2" size="default">
        <el-descriptions-item label="回访记录：">{{ form.remark }}</el-descriptions-item>
      </el-descriptions>
    </div>

    <div class="footer-center">
      <el-button :disabled="disabledbtn" @click="cancelSubmit">取 消</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { postOrPutType } from "@/constants";
import type { HasId, ViewMode } from "@/types/common";
import { useState } from "@/hooks/useState.ts";
import type { IVisit, IVisitVO } from "@/types/visit";
import { getVisitByIdInfo } from "@/utils/api/visit";
import { handleVerifyFormatDate } from "@/utils/utils";
import { IMG_URL } from "@/utils/config";
const { disabledbtn } = useState();
interface Props {
  id: number;
}
const { id } = defineProps<Props>();
const formStatus = defineModel<ViewMode>("formStatus", { required: true });
const emit = defineEmits<{
  handleInitData: [];
  handleSuccess: [];
  handleFaqCategoryRefresh: [];
}>();

const form = reactive<IVisit>({
  id: 0,
  contacts_name: "",
  address: "",
  reason: "",
  remark: "",
  store_name: "",
  store_full_address: "",
  answer_result: [],
  images: [],
  create_time: ""
});

const isDisabledbtn = ref(false);
const methodType = ref<postOrPutType>("PUT");

onMounted(() => {
  console.log("Component mounted!");
});

/* formStatus处理器 */
const statusHandlers: Record<ViewMode, () => void> = {
  view: () => {
    isDisabledbtn.value = true;
  },
  edit: () => {
    methodType.value = "PUT";
  },
  add: () => {
    methodType.value = "POST";
  },
  none: () => {
    /* 初始化数据 */
    handleInitData();
  }
};
/* 监听formStatus,新增，编辑，查看的时候都可以打开模态框，又是有不同的操作和效果，需要单独判断，none为模态框关闭的情况，需要初始化数据 */
watch(formStatus, newValue => {
  const handler = statusHandlers[newValue];
  handler?.();
});

/*  */
watch(
  () => id,
  newValue => {
    if (newValue == 0) {
      /* 初始化数据 */
    } else {
      form.id = newValue;
      handleGetVisitByIdInfo(id);
    }
  }
);

/* 通过id获取前端账户详情信息 */
function handleGetVisitByIdInfo(id: number) {
  getVisitByIdInfo<IVisitVO, HasId>({ id })
    .then(res => {
      form.id = res.result.id;
      form.contacts_name = res.result.staff.contacts_name;
      form.address = res.result.address;
      form.reason = res.result.reason;
      form.remark = res.result.remark;
      form.store_name = res.result.store.store_name;
      form.store_full_address = res.result.store.store_full_address;
      form.answer_result = res.result.answer_result;
      form.images = res.result.images.map(item => IMG_URL + item);
      form.create_time = handleVerifyFormatDate(res.result.create_time * 1000);
    })
    .catch(res => {
      console.log(res);
    });
}

/* 初始化数据 */
function handleInitData() {
  methodType.value = "POST";
  isDisabledbtn.value = false;
}
/* 保存或编辑 取消提交 */
function cancelSubmit() {
  // clearData();
  // activeName = "one";
  emit("handleInitData");
}
</script>

<style lang="scss" scoped>
/* 修改select的盒模型 */
.el-select {
  display: block;
}
/* 底部按钮居中 */
.footer-center {
  margin: 10px 0;
  text-align: center;
}

.img-item {
  width: 100px;
  height: 100px;
  margin-right: 10px;
}
</style>
